<style lang="less">
  .short-task-driver {
    display: flex;
    flex-direction: column;
    .border-card {
      margin-top: 20px;
    }
    .f-mt10 {
      margin-top: 10px;
    }
    .ms-tree-space {
      position: relative;
      top: 1px;
      display: inline-block;
      font-family: 'Glyphicons Halflings';
      font-style: normal;
      font-weight: 400;
      line-height: 1;
      width: 18px;
      height: 14px;
    }

    .el-table{
      flex: 1;
    }
  }

</style>
<template>
  <section class="short-task-driver">
    <!--查询工具条-->
    <search-bar>
      <el-row :data="conditions">
        <el-col :span="6">
          <el-form-item label="司机姓名" :label-width="searchConditionLabelWidth">
            <el-select v-model="driverSelectIds" placeholder="请选择司机"
                       multiple
                       filterable
                       remote
                       :remote-method="driverIdRemoteMethod"
                       :loading="driverIdLoading">
              <el-option
                v-for="item in driverIdOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="统计日期" :label-width="searchConditionLabelWidth">
            <el-button-group>
              <el-button style="padding-left: 15px;padding-right: 15px" @click="searchToday">今日</el-button>
              <el-button style="padding-left: 15px;padding-right: 15px" @click="searchWeek">近一周</el-button>
              <el-button style="padding-left: 15px;padding-right: 15px" @click="searchMonth">近一月</el-button>
            </el-button-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label-width="searchConditionLabelWidthNone">
            <el-date-picker
              v-model="statisticsDate"
              type="daterange"
              align="right"
              placeholder="选择日期范围">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </search-bar>
    <!-- 操作 -->
    <el-col :span="24" style="margin-bottom: 10px">
      <el-button type="primary" @click="exportResult"> 导  出 </el-button>
      <el-button type="primary" @click="resetCondition" style="float: right">重置</el-button>
      <el-button type="primary" @click="handleSearch" style="float: right;margin-right: 10px">查询</el-button>
    </el-col>
    <ue-el-tree-table
      height="100%"
      tree-width="250"
      tree-field-name="orgName"
      tree-structure
      tree-expand-all
      highlight-current-row
      border
      :data-source="tableData">
      <el-table-column prop="index" label="序号" min-width="80" align="center">
      </el-table-column>
      <el-table-column prop="driverName" label="司机姓名" min-width="100" align="center">
      </el-table-column>
      <el-table-column prop="totalIncome" label="收益（元）" min-width="150" align="center">
      </el-table-column>
      <el-table-column prop="totalAssignVotes" label="下发数（单）" min-width="150" align="center">
      </el-table-column>
      <el-table-column prop="totalReceiveVotes" label="接受数（单）" min-width="150" align="center">
      </el-table-column>
      <el-table-column prop="totalRefuse" label="拒绝数（单）" min-width="150" align="center">
      </el-table-column>
      <el-table-column prop="totalCompleteVotes" label="完成数（单）" min-width="150" align="center">
      </el-table-column>
      <el-table-column prop="totalWeight" label="完成重量（t）" min-width="150" align="center">
      </el-table-column>
      <el-table-column prop="totalVolume" label="完成体积（m³）" min-width="150" align="center">
      </el-table-column>
      <el-table-column label="操作" min-width="120" align="center">
        <template slot-scope="scope">
          <el-button type="primary" v-if="scope.row.driverId != null"
                     @click="getDriverIncomeListBYId(scope.$index,scope.row)">收益记录
          </el-button>
        </template>
      </el-table-column>
    </ue-el-tree-table>
    <!--收益 记录 弹窗-->
    <el-dialog :title="earningsTitle" size="large" :visible.sync="earningsVisible"
               :close-on-click-modal="false">
      <el-form label-width="100px">
        <search-bar>
          <el-row :data="conditionsDetail">
            <el-col :span="6">
              <el-form-item label="订单编号" :label-width="searchConditionLabelWidth">
                <el-input  v-model="conditionsDetail.orderNumber" style="min-width:30px;max-width: 220px"
                          placeholder="请输入订单编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户名称" :label-width="searchConditionLabelWidth">
                <el-select v-model="memberIds" placeholder="请选择客户名称"
                           multiple
                           filterable
                           remote
                           :remote-method="memberIdRemoteMethod"
                           :loading="memberIdLoading">
                  <el-option
                    v-for="item in memberIdOptions"
                    :key="item.id"
                    :label="item.realName"
                    :value="item.userId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="签收日期" :label-width="searchConditionLabelWidth">
                <el-date-picker
                  v-model="signOffDate"
                  type="daterange"
                  align="right"
                  placeholder="选择日期范围">
                </el-date-picker>
              </el-form-item>
            </el-col>

          </el-row>
        </search-bar>
        <!-- 操作 -->
        <el-col :span="24" style="margin-bottom: 10px">
          <el-button type="primary" @click="exportDialogResult"> 导  出 </el-button>
          <el-button type="primary" @click="resetDialogCondition" style="float: right">重置</el-button>
          <el-button type="primary" @click="handleSearchDetail" style="float: right;margin-right: 10px">查询</el-button>
        </el-col>
        <!--列表-->
        <el-table :data="incomeDetailTable" highlight-current-row border style="width: 100%;" min-height="450"
                  max-height="600"
                  v-loading="detailListLoading">
          <el-table-column type="index" width="80" label="序号" align="center">
          </el-table-column>
          <el-table-column prop="orderNumber" label="订单编号" min-width="250" align="center">
          </el-table-column>
          <el-table-column prop="completeTime" label="签收日期" width="250" align="center">
          </el-table-column>
          <el-table-column prop="orderMoney" label="订单金额（元）" width="150" align="center">
          </el-table-column>
          <el-table-column prop="income" label="收益金额（元）" width="150" align="center">
          </el-table-column>
          <el-table-column prop="customerName" label="客户名称" width="150" align="center">
          </el-table-column>
          <el-table-column prop="cargoName" label="货物名称" width="150" align="center">
          </el-table-column>
          <el-table-column prop="amount" label="件数（件）" width="100" align="center">
          </el-table-column>
          <el-table-column prop="weight" label="重量（t）" width="150" align="center">
          </el-table-column>
          <el-table-column prop="volume" label="体积（m³）" width="150" align="center">
          </el-table-column>
        </el-table>
        <!--分页信息工具条-->
        <el-col :span="24" class="toolbar">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total,sizes,prev, pager, next, jumper"
            :total="total" style="float: right">
          </el-pagination>
        </el-col>
      </el-form>
    </el-dialog>
  </section>
</template>
<script>
import { searchDriverIncomeDetails, searchDriverIncomeStatistics } from '../../api/statistics/ShortTaskDriver';
import { isEmpty } from '../../lib/util';
import { searchDriverInfos } from '../../api/stowage/shortTask';
import { getMemberUsers } from '../../api/customer/maintain.js';
export default {
  data () {
    return {
      //* *************通用属性***************
      token: this.$store.state.token,
      searchConditionLabelWidth: '100px',
      searchConditionLabelWidthNone: '0px',
      listLoading: false,
      driverIdLoading: false,

      //* ***************短驳司机汇总-开始************************************
      driverIdOptions: [], // 司机名-司机id
      conditions: {
        driverIds: '', // 司机(下拉框  名-id）--多选
        statisticsDateBegin: null, // 统计日期开始
        statisticsDateEnd: null// 统计日期结束
      },
      driverSelectIds: [], // 司机下拉框
      statisticsDate: [],
      // 绑定的数据-树形数据
      tableData: [],
      //* ********************************树形列表结束**********************

      //* ***********************************收益记录弹窗-开始********************************
      // 查询
      memberIdLoading: false,
      memberIds: '',
      memberIdOptions: [],
      signOffDate: [],
      conditionsDetail: {
        driverId: '',
        orderNumber: '', // 订单号
        customerIds: '', // 客户名称
        completeTimeBegin: null, // 签收日期开始
        completeTimeEnd: null// 签收日期结束
      },
      // 列表
      detailListLoading: false,
      incomeDetailTable: [],
      earningsVisible: false,
      earningsTitle: '司机收益记录',
      // 分页、排序
      total: 0,
      currentPage: 1,
      pageSize: 10,
      sortProp: 'sorts',
      sortOrder: 'descending'
      //* ***********************************收益记录弹窗-结束********************************
    };
  },
  methods: {
    //* **********************************短驳司机统计开始******************************************
    // 今天
    searchToday () {
      const end = new Date();
      const start = new Date();
      this.statisticsDate = [start, end];
    },
    // 这一周
    searchWeek () {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      this.statisticsDate = [start, end];
    },
    // 这一月
    searchMonth () {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      this.statisticsDate = [start, end];
    },
    // 导出
    exportResult () {
      console.log('导出');
    },
    // 查询按钮

    handleSearch () {
      console.log('查询按钮');
      // 清空数据操作
      this.conditions = {
        driverIds: '', // 司机(下拉框  名-id）--多选
        statisticsDateBegin: null, // 统计日期开始
        statisticsDateEnd: null// 统计日期结束
      };
      // 清除用于下部页面列表查询的缓存数据
      if (!isEmpty(this.statisticsDate) && !isEmpty(this.statisticsDate[0])) {
        this.conditions.statisticsDateBegin = this.statisticsDate[0].toJSON();
        this.conditions.statisticsDateEnd = this.statisticsDate[1].toJSON();
      }
      if (!isEmpty(this.driverSelectIds) && !isEmpty(this.driverSelectIds[0])) {
        this.conditions.driverIds = this.driverSelectIds.join(',');
      }

      this.listLoading = true;
      searchDriverIncomeStatistics(this.conditions).then((res) => {
        this.listLoading = false;
        if (res.data.successFlg === true) {
          this.tableData = res.data.detailModelList;
        } else {
          this.$message.error('查询失败！');
        }
      });
    },
    // 重置查询条件
    resetCondition () {
      this.conditions = {
        driverInfoIds: '', // 司机(下拉框  名-id）--多选
        statisticsDateBegin: null, // 统计日期开始
        statisticsDateEnd: null// 统计日期结束
      };
      this.driverInfoIds = [];
      this.statisticsDate = '';
    },
    // 加载司机下拉列表数据
    driverIdRemoteMethod (value) {
      console.log('加载司机数据（id-名字）');
      if (value !== '') {
        setTimeout(() => {
          this.driverIdLoading = true;
          let params = 'name?' + value;
          searchDriverInfos({
            token: this.token,
            page: 1,
            size: 100,
            filters: params,
            sorts: '+name'
          }).then((res) => {
            this.driverIdLoading = false;
            if (res.data.successFlg === true) {
              if (res.data.detailModelList != null && res.data.detailModelList.length > 0) {
                this.driverIdOptions = res.data.detailModelList;
              }
            } else {
              this.$message.error('查询失败！');
            }
          }).catch(() => {
            this.$message.error('数据有误，查询失败！');
            this.driverIdLoading = false;
          });
        }, 500);
      } else {
        this.driverIdOptions = [];
      }
    },
    //* **********************************短驳司机统计结束******************************************

    //* **********************************司机收益记录-开始*****************************************
    // 下拉框加载
    memberIdRemoteMethod (val) {
      console.log('客户名字（id-名字）');
      let filters = isEmpty(val) ? 'logicStatus=111002002' : 'logicStatus=111002002 g0;realName?' + val + ' g1';
      getMemberUsers({
        token: this.token,
        filters: filters,
        sorts: '',
        size: '15',
        page: '1'
      }).then((res) => {
        this.memberIdOptions = res.data.detailModelList;
      });
    },
    // 导出
    exportDialogResult () {
      console.log('导出司机收益记录列表');
    },
    // 重置查询条件
    resetDialogCondition () {
      console.log('重置司机收益记录查询条件');
      this.conditionsDetail.orderNumber = '';// 订单号
      this.conditionsDetail.customerId = '';// 客户名称
      this.conditionsDetail.completeTimeBegin = null; // 签收日期开始
      this.conditionsDetail.completeTimeEnd = null;// 签收日期结束
      this.memberIdOptions = [];
      this.signOffDate = [];
    },

    // 弹出司机收益记录页
    getDriverIncomeListBYId (index, row) {
      this.signOffDate = this.statisticsDate;
      this.conditionsDetail.driverId = row.driverId;
      this.earningsVisible = true;
      this.handleSearchDetail();
      this.memberIdRemoteMethod();
    },
    // 查询司机收益列表操作
    handleSearchDetail () {
      // 会话框搜索条件清空
      this.conditionsDetail.customerId = '';
      this.conditionsDetail.completeTimeBegin = null;
      this.conditionsDetail.completeTimeEnd = null;
      // 司机id
      console.log('查询按钮');
      // 清空数据操作
      if (!isEmpty(this.signOffDate) && !isEmpty(this.signOffDate[0])) {
        this.conditionsDetail.completeTimeBegin = this.signOffDate[0].toJSON();
        this.conditionsDetail.completeTimeEnd = this.signOffDate[1].toJSON();
      }
      if (!isEmpty(this.memberIds) && !isEmpty(this.memberIds[0])) {
        this.conditionsDetail.customerId = this.memberIds.join(',');
      }
      this.detailListLoading = true;
      this.conditionsDetail.page = this.currentPage;
      this.conditionsDetail.size = this.pageSize;
      searchDriverIncomeDetails(this.conditionsDetail).then((res) => {
        this.detailListLoading = false;
        if (res.data.successFlg === true && res.data.detailModelList !== null) {
          if (res.data.detailModelList.length > 0) {
            this.incomeDetailTable = res.data.detailModelList;
            this.currentPage = res.data.currPage;
            this.total = res.data.totalCount;
            this.pageSize = res.data.pageSize;
          } else {
            this.incomeDetailTable = [];
          }
        } else {
          this.incomeDetailTable = [];
        }
      }).catch(() => {
        this.$message.error('数据有误，查询失败！');
        this.detailListLoading = false;
      });
    },
    // 排序操作
    sortChange (o) {
      this.sortProp = o.prop;
      this.sortOrder = o.order;
      this.handleSearchDetail();
    },
    // 每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.handleSearchDetail();
    },
    // 第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.handleSearchDetail();
    }
    //* **********************************树形列表展示-结束*****************************************
  },
  mounted () {
    this.$store.commit('initDict');
    this.searchToday();// 默认当天
    this.handleSearch();
  }
};
</script>
